<template>
    <div class="registerMain fill flex justify-center align-center flex-direction">
        <Menus :webconfig="webinfo.webinfo" :data="webinfo.menusnav"></Menus>
        <div class="registerBox">
            <div class="fill">
                <div class="formBox flex justify-center align-center flex-direction">
                    <Upload @onsuccess="uploadHandler"></Upload>
                    <div class="formItemBox flex justify-start align-center">
                        <vs-input state="success" label="昵称" success v-model="nickname" placeholder="请输入昵称" autocomplete="off" width="300">
                            <template #icon>
                                <i class='bx bxs-id-card'></i>
                            </template>
                            <template v-if="nickname == ''" #message-danger>
                                请输入昵称
                            </template>
                        </vs-input>
                    </div>
                    <div class="formItemBox flex justify-start align-center">
                        <vs-input state="success" label="注册邮箱" success v-model="email" placeholder="请输入邮箱" autocomplete="off" width="300">
                            <template #icon>
                                <i class='bx bx-mail-send' ></i>
                            </template>
                            <template v-if="!checkEmail && email !== ''" #message-danger>
                                请输入正确的邮箱
                            </template>
                        </vs-input>
                    </div>
                    <div class="formItemBox flex justify-start align-start">
                        <div class="gss flex justify-center align-center">C</div>
                        <vs-input @click-icon="getCheckCodeHandler" :label="`验证码${seconds>0?'（'+seconds+'秒后可重新获取）':''}`" state="success" success v-model="checkcode" placeholder="请输入验证码" autocomplete="off" width="300" style="flex:1 1 auto;" icon-after>
                            <template #icon>
                                <i class='bx bx-code-block' ></i>
                            </template>
                            <template v-if="checkcode == ''" #message-danger>
                                请输入验证码
                            </template>
                        </vs-input>
                    </div>
                    <div class="formItemBox flex justify-start align-center">
                        <vs-input state="danger" label="密码" danger type="password" v-model="password" placeholder="请输入密码" autocomplete="off">
                            <template #icon>
                                <i class='bx bx-lock'></i>
                            </template>
                            <template v-if="password == ''" #message-danger>
                                请输入密码
                            </template>
                        </vs-input>
                    </div>
                    <div v-if="password" class="formItemBox flex justify-start align-center">
                        <vs-input @keyup.enter.native="appRegister" state="danger" label="重复密码" danger type="password" v-model="repassword" placeholder="请输入密码" autocomplete="off">
                            <template #icon>
                                <i class='bx bx-lock'></i>
                            </template>
                            <template v-if="repassword!==password&&repassword !== ''" #message-danger>
                                两次密码输入不一致
                            </template>
                        </vs-input>
                    </div>
                    <div class="formItemBox flex justify-start align-center">
                        <vs-button @click="appRegister" flat color="warn">
                            <i class='bx bx-navigation'></i>
                            <span style="font-size: 12px;padding-left: 5px;">立即注册</span>
                        </vs-button>
                        <nuxt-link to="/login">
                            <vs-button size="mini">
                                有账号现在去登录
                            </vs-button>
                        </nuxt-link>
                    </div>
                </div>
            </div>
        </div>
        <Copy :webconfig="webinfo.webinfo" :frendlyData="webinfo.friends" :menuDatas="webinfo.menus" :bussinessData="webinfo.bussiness" :questionsData="webinfo.questions.data"></Copy>
    </div>
</template>
<script>
    import { extendsMenus,extendsParams,extendsEncrypte } from '~/assets/inc/common.js';
    import { apis } from '~/assets/inc/apis.js';
    let timer = null;
    export default{
        data() {
            return { 
                webinfo: 'default',
                avator:'',
                nickname:'',
                email:'',
                checkcode:'',
                password:'',
                repassword:'',
                msgText:'获取验证码',
                seconds:0,
            }
        },
        async asyncData(context) {
            extendsEncrypte({},context.$axios);
            let res = await context.$axios.get(apis.indexApi,extendsParams({}));
            res.data.message.menusnav = extendsMenus([...res.data.message.menus]);
            return { webinfo: res.data.message }
        },
        head(){
            return {
                title: this.webinfo.webinfo.title,
                meta: [
                    { charset: 'utf-8' },
                    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
                    { name: 'keywords', content:  this.webinfo.webinfo.web_keywords},
                    { hid: 'description',name: 'description',content: this.webinfo.webinfo.web_descriptons}
                ]
            }
        },
        computed: {
            checkEmail() {
                return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email)
            }
        },
        mounted(){
            this.$store.commit('setLoading',false);
        },
        beforeDestroy(){
            this.$store.commit('setLoading',true);
        },
        methods:{
            //获取邮箱验证码
            async getCheckCodeHandler(){
                this.checkcode = '';
                if(!this.email){
                    this.$vs.notification({
                        progress: 'auto',
                        color:'danger',
                        position:'bottom-center',
                        title: 'Web Message!',
                        text: '请输入邮箱'
                    })
                    return;
                }
                if(this.seconds>0){
                    this.$vs.notification({
                        progress: 'auto',
                        color:'danger',
                        position:'bottom-center',
                        title: 'Web Message!',
                        text: `${this.seconds}秒后才能重新获取`
                    })
                    return;
                }
                this.$store.commit('setLoading',true);
                extendsEncrypte({ email:this.email },this.$axios);
                const res = await this.$axios.post(apis.getCheckCodeAPI,extendsParams({ email:this.email }));
                this.$vs.notification({
                    progress: 'auto',
                    color:res.data.code==200?'success':'danger',
                    position:'bottom-center',
                    title: 'Web Message!',
                    text: res.data.message
                })
                if(res.data.code==200){
                    this.seconds = 60;
                    timer = setInterval(() => {
                        this.seconds -= 1;
                        if(this.seconds<=0){
                            this.seconds = 0;
                            clearInterval(timer);
                        }
                    }, 1000);
                }
                this.$store.commit('setLoading',false);
            },
            //注册
            async appRegister(){
                const { email,password,avator,nickname,checkcode } = this;
                if(!avator){
                    this.$vs.notification({
                        progress: 'auto',
                        color:'danger',
                        position:'bottom-center',
                        title: 'Web Message!',
                        text: '请上传一张头像'
                    })
                    return;
                }
                if(!nickname){
                    this.$vs.notification({
                        progress: 'auto',
                        color:'danger',
                        position:'bottom-center',
                        title: 'Web Message!',
                        text: '请输入你自己的昵称'
                    })
                    return;
                }
                if(!email){
                    this.$vs.notification({
                        progress: 'auto',
                        color:'danger',
                        position:'bottom-center',
                        title: 'Web Message!',
                        text: '请输入邮箱'
                    })
                    return;
                }
                if(!password){
                    this.$vs.notification({
                        progress: 'auto',
                        color:'danger',
                        position:'bottom-center',
                        title: 'Web Message!',
                        text: '请输入密码'
                    })
                    return;
                }
                if(!checkcode){
                    this.$vs.notification({
                        progress: 'auto',
                        color:'danger',
                        position:'bottom-center',
                        title: 'Web Message!',
                        text: '请输入收到验证码'
                    })
                    return;
                }
                this.$store.commit('setLoading',true);
                extendsEncrypte({email,password,avator,nickname,checkcode},this.$axios);
                let res = await this.$axios.post(apis.registerAPI,extendsParams({email,password,avator,nickname,checkcode}));
                this.$vs.notification({
                    progress: 'auto',
                    color:res.data.code==200?'success':'danger',
                    position:'bottom-center',
                    title: 'Web Message!',
                    text: res.data.message
                })
                if(res.data.code==200){
                    this.email='';
                    this.checkcode = '';
                    this.password='';
                    this.repassword='';
                    this.avator='';
                    this.nickname='';
                    this.$router.replace({path:'/login'})
                }
                this.$store.commit('setLoading',false);
            },
            //上传头像
            uploadHandler(e){
                this.avator = e.url;
            }
        }
    }
</script>
<style lang="scss" scoped>
.registerMain{
    .registerBox{
        width:1200px;
        backdrop-filter: blur(10px);
        border-radius: 30px;
        margin: 200px 0 50px 0;
        padding:30px;
        .registerLogo{
            width:100%;
            height:120px;
            img{
                width: auto;
                height: 200px;
            }
            h1{
                letter-spacing: 2px;
                padding:50px 0 5px 10px;
            }
        }
        .formBox{
            width:100%;
            .formItemBox{
                width:400px;
                padding:20px 0;
            }
        }
    }
}
@media screen and (min-width:0px) and (max-width:1280px) {
    .registerMain{
        .registerBox{
            width:100%;
            backdrop-filter: blur(1rem);
            border-radius: 0;
            margin: 7rem 0 2rem 0;
            padding:3rem;
            .registerLogo{
                width:100%;
                height:12rem;
                img{
                    width: auto;
                    height: 20rem;
                }
                h1{
                    letter-spacing: 0.2rem;
                    padding:5rem 0 0.5rem 1rem;
                }
            }
            .formBox{
                width:100%;
                .formItemBox{
                    width:100%;
                    padding:2rem 0;
                }
            }
        }
    }
}
</style>
<style lang="scss">
.vs-input-parent{
    width:100% !important;
}
.vs-input{
    width:100%;
}
</style>